<template>
  <div class="dashboard-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h2 class="page-title">
          <el-icon class="title-icon"><Monitor /></el-icon>
          仪表板
        </h2>
        <p class="page-description">欢迎使用后台管理系统，这里是您的控制中心</p>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="refreshData" class="refresh-btn">
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon users">
            <el-icon><User /></el-icon>
        </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.totalUsers }}</div>
            <div class="stat-label">总用户数</div>
            <div class="stat-change positive">+{{ stats.newUsers }} 今日</div>
            </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon active">
            <el-icon><UserFilled /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.activeUsers }}</div>
            <div class="stat-label">活跃用户</div>
            <div class="stat-change positive">+{{ stats.activeGrowth }}%</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon articles">
            <el-icon><Document /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.totalArticles }}</div>
            <div class="stat-label">文章总数</div>
            <div class="stat-change positive">+{{ stats.newArticles }} 本周</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon views">
            <el-icon><View /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.totalViews }}</div>
            <div class="stat-label">总浏览量</div>
            <div class="stat-change positive">+{{ stats.viewGrowth }}%</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表和内容区域 -->
    <div class="content-section">
      <div class="content-grid">
        <!-- 最近活动 -->
        <div class="content-card">
          <div class="card-header">
            <h3 class="card-title">
              <el-icon><Clock /></el-icon>
              最近活动
            </h3>
            <el-button link @click="viewAllActivities">查看全部</el-button>
          </div>
          <div class="card-content">
            <div class="activity-list">
              <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
                <div class="activity-icon">
                  <el-icon><component :is="activity.icon" /></el-icon>
                </div>
                <div class="activity-content">
                  <div class="activity-title">{{ activity.title }}</div>
                  <div class="activity-time">{{ activity.time }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 系统状态 -->
        <div class="content-card">
          <div class="card-header">
            <h3 class="card-title">
              <el-icon><Setting /></el-icon>
              系统状态
            </h3>
            <el-tag :type="systemStatus.status" size="small">{{ systemStatus.text }}</el-tag>
          </div>
          <div class="card-content">
            <div class="status-list">
              <div class="status-item">
                <span class="status-label">CPU使用率</span>
                <el-progress :percentage="systemStatus.cpu" :color="getProgressColor(systemStatus.cpu)" />
              </div>
              <div class="status-item">
                <span class="status-label">内存使用率</span>
                <el-progress :percentage="systemStatus.memory" :color="getProgressColor(systemStatus.memory)" />
              </div>
              <div class="status-item">
                <span class="status-label">磁盘使用率</span>
                <el-progress :percentage="systemStatus.disk" :color="getProgressColor(systemStatus.disk)" />
              </div>
              <div class="status-item">
                <span class="status-label">网络状态</span>
                <el-tag :type="systemStatus.network.status" size="small">{{ systemStatus.network.text }}</el-tag>
              </div>
            </div>
          </div>
        </div>

        <!-- 快速操作 -->
        <div class="content-card">
          <div class="card-header">
            <h3 class="card-title">
              <el-icon><Operation /></el-icon>
              快速操作
            </h3>
          </div>
          <div class="card-content">
            <div class="quick-actions">
              <el-button type="primary" @click="quickAction('addUser')" class="action-btn">
                <el-icon><Plus /></el-icon>
                添加用户
              </el-button>
              <el-button type="success" @click="quickAction('createArticle')" class="action-btn">
                <el-icon><Edit /></el-icon>
                创建文章
              </el-button>
              <el-button type="warning" @click="quickAction('backup')" class="action-btn">
                <el-icon><Download /></el-icon>
                数据备份
              </el-button>
              <el-button type="info" @click="quickAction('settings')" class="action-btn">
                <el-icon><Setting /></el-icon>
                系统设置
              </el-button>
            </div>
        </div>
      </div>

        <!-- 通知中心 -->
        <div class="content-card">
          <div class="card-header">
            <h3 class="card-title">
              <el-icon><Bell /></el-icon>
              通知中心
            </h3>
            <el-button link @click="markAllRead">全部已读</el-button>
      </div>
          <div class="card-content">
            <div class="notification-list">
              <div v-for="notification in notifications" :key="notification.id" class="notification-item">
                <div class="notification-icon" :class="notification.type">
                  <el-icon><component :is="notification.icon" /></el-icon>
                </div>
                <div class="notification-content">
                  <div class="notification-title">{{ notification.title }}</div>
                  <div class="notification-message">{{ notification.message }}</div>
                  <div class="notification-time">{{ notification.time }}</div>
                </div>
                <el-button link @click="markAsRead(notification.id)" class="mark-read-btn">
                  <el-icon><Check /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { 
  Monitor, User, UserFilled, Document, View, Clock, Setting, 
  Operation, Plus, Edit, Download, Bell, Check, Refresh
} from '@element-plus/icons-vue';

export default {
  name: 'Dashboard',
  components: {
    Monitor, User, UserFilled, Document, View, Clock, Setting, 
    Operation, Plus, Edit, Download, Bell, Check, Refresh
  },
  setup() {
    const router = useRouter();
    
    // 统计数据
    const stats = ref({
      totalUsers: 1250,
      newUsers: 12,
      activeUsers: 856,
      activeGrowth: 8.5,
      totalArticles: 342,
      newArticles: 15,
      totalViews: 15680,
      viewGrowth: 12.3
    });

    // 系统状态
    const systemStatus = ref({
      status: 'success',
      text: '正常',
      cpu: 45,
      memory: 62,
      disk: 78,
      network: {
        status: 'success',
        text: '正常'
      }
    });

    // 最近活动
    const recentActivities = ref([
      {
        id: 1,
        title: '新用户注册',
        time: '2分钟前',
        icon: 'User'
      },
      {
        id: 2,
        title: '文章发布',
        time: '5分钟前',
        icon: 'Document'
      },
      {
        id: 3,
        title: '系统备份',
        time: '10分钟前',
        icon: 'Download'
      },
      {
        id: 4,
        title: '权限更新',
        time: '15分钟前',
        icon: 'Setting'
      }
    ]);

    // 通知列表
    const notifications = ref([
      {
        id: 1,
        title: '系统更新',
        message: '系统将在今晚进行维护更新',
        time: '1小时前',
        type: 'info',
        icon: 'Setting'
      },
      {
        id: 2,
        title: '新用户加入',
        message: '有3个新用户注册了系统',
        time: '2小时前',
        type: 'success',
        icon: 'User'
      },
      {
        id: 3,
        title: '磁盘空间警告',
        message: '磁盘使用率已达到85%',
        time: '3小时前',
        type: 'warning',
        icon: 'Warning'
      }
    ]);

    // 获取进度条颜色
    const getProgressColor = (percentage) => {
      if (percentage < 50) return '#67C23A';
      if (percentage < 80) return '#E6A23C';
      return '#F56C6C';
    };

    // 刷新数据
    const refreshData = () => {
      ElMessage({
        message: '数据已刷新',
        type: 'success'
      });
    };

    // 查看所有活动
    const viewAllActivities = () => {
      router.push('/app/system/logs');
    };

    // 快速操作
    const quickAction = (action) => {
      switch (action) {
        case 'addUser':
          router.push('/app/user/list');
          break;
        case 'createArticle':
          router.push('/app/article');
          break;
        case 'backup':
          ElMessage({
            message: '开始数据备份...',
            type: 'info'
          });
          break;
        case 'settings':
          router.push('/app/system/settings');
          break;
      }
    };

    // 标记全部已读
    const markAllRead = () => {
      notifications.value.forEach(notification => {
        notification.read = true;
      });
      ElMessage({
        message: '已标记全部已读',
        type: 'success'
      });
    };

    // 标记单个通知为已读
    const markAsRead = (id) => {
      const notification = notifications.value.find(n => n.id === id);
      if (notification) {
        notification.read = true;
      }
    };

    onMounted(() => {
      // 模拟数据加载
      console.log('Dashboard mounted');
    });

    return {
      stats,
      systemStatus,
      recentActivities,
      notifications,
      getProgressColor,
      refreshData,
      viewAllActivities,
      quickAction,
      markAllRead,
      markAsRead
    };
  }
};
</script>

<style scoped>
.dashboard-page {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.header-left {
  flex: 1;
  margin-right: 20px;
}

.header-right {
  flex-shrink: 0;
}

.page-title {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  color: #303133;
  margin: 0 0 8px 0;
}

.title-icon {
  margin-right: 8px;
  font-size: 1.8rem;
  color: #409eff;
}

.page-description {
  font-size: 0.9rem;
  color: #606266;
  margin: 0;
}

.refresh-btn {
  height: 40px;
  padding: 0 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 统计卡片 */
.stats-section {
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.users {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.active {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
}

.stat-icon.articles {
  background: linear-gradient(135deg, #e6a23c 0%, #f0ad4e 100%);
}

.stat-icon.views {
  background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.9rem;
  color: #606266;
  margin-bottom: 4px;
}

.stat-change {
  font-size: 0.8rem;
  font-weight: 500;
}

.stat-change.positive {
  color: #67c23a;
}

.stat-change.negative {
  color: #f56c6c;
}

/* 内容区域 */
.content-section {
  margin-bottom: 24px;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.content-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.card-title {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  color: #303133;
  margin: 0;
}

.card-title .el-icon {
  margin-right: 8px;
  color: #409eff;
}

.card-content {
  padding: 24px;
}

/* 活动列表 */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.activity-item:hover {
  background: #f0f0f0;
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 0.9rem;
  color: #303133;
  margin-bottom: 2px;
}

.activity-time {
  font-size: 0.8rem;
  color: #909399;
}

/* 状态列表 */
.status-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-label {
  font-size: 0.9rem;
  color: #606266;
  min-width: 80px;
}

/* 快速操作 */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.action-btn {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
}

/* 通知列表 */
.notification-list {
  display: flex;
    flex-direction: column;
  gap: 12px;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.notification-item:hover {
  background: #f0f0f0;
}

.notification-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: white;
  flex-shrink: 0;
}

.notification-icon.info {
  background: #409eff;
}

.notification-icon.success {
  background: #67c23a;
}

.notification-icon.warning {
  background: #e6a23c;
}

.notification-icon.error {
  background: #f56c6c;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-size: 0.9rem;
  color: #303133;
  margin-bottom: 4px;
  font-weight: 500;
}

.notification-message {
  font-size: 0.8rem;
  color: #606266;
  margin-bottom: 4px;
}

.notification-time {
  font-size: 0.7rem;
  color: #909399;
}

.mark-read-btn {
  padding: 4px;
  color: #909399;
}

.mark-read-btn:hover {
  color: #409eff;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  
  .content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-page {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .dashboard-page {
    padding: 12px;
  }
  
  .page-header {
    padding: 16px;
  }
  
  .stats-section {
    margin-bottom: 20px;
  }
  
  .content-section {
    gap: 16px;
  }
  
  .quick-actions {
    grid-template-columns: 1fr;
  }
}
</style> 